<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
<!-- qtquick-connection-editor-bindings.qdoc -->
  <title>Adding Bindings Between Properties | Qt Creator Manual</title>
  <link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
  <script type="text/javascript">
    document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
    // loading style sheet breaks anchors that were jumped to before
    // so force jumping to anchor again
    setTimeout(function() {
        var anchor = location.hash;
        // need to jump to different anchor first (e.g. none)
        location.hash = "#";
        setTimeout(function() {
            location.hash = anchor;
        }, 0);
    }, 0);
  </script>
</head>
<body>
<div class="header" id="qtdocheader">
  <div class="main">
    <div class="main-rounded">
      <div class="navigationbar">
        <table><tr>
<td ><a href="index.html">Qt Creator Manual</a></td><td >Adding Bindings Between Properties</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="index.html">Qt Creator Manual 4.11.1</a></td>
        </tr></table>
      </div>
    </div>
<div class="content">
<div class="line">
<div class="content mainContent">
  <link rel="prev" href="quick-dynamic-properties.html" />
  <link rel="next" href="quick-connections-backend.html" />
<p class="naviNextPrevious headerNavi">
<a class="prevPage" href="quick-dynamic-properties.html">Specifying Dynamic Properties</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-connections-backend.html">Managing C++ Backend Objects</a>
</p><p/>
<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">Adding Bindings Between Properties</h1>
<span class="subtitle"></span>
<!-- $$$quick-property-bindings.html-description -->
<div class="descr"> <a name="details"></a>
<p>To dynamically change the behavior of an object, you can create a <i>binding</i> between the properties of two objects. To create a property binding, a property is assigned a JavaScript expression that evaluates to the desired value. At its simplest, a binding may be a reference to another property. For example, the height of an object can be bound to the height of its parent, so that when the parent height changes, the object height is adjusted automatically.</p>
<p>For more information about the use of property bindings, see <a href="http://doc.qt.io/qt-5/qtqml-syntax-propertybinding.html">Property Binding</a>.</p>
<p>You can create bindings between objects in the <b>Connections</b> view.</p>
<p class="centerAlign"><img src="images/qmldesigner-bindings.png" alt="" /></p><p>To bind a property of an object to the property of another object:</p>
<ol class="1" type="1"><li>In the <b>Connections</b> view, select the <b>Bindings</b> tab.</li>
<li>Select the <img src="images/plus.png" alt="" /> (<b>Add</b>) button to add a binding for the currently selected item. The ID is displayed in the <b>Item</b> column.</li>
<li>Double-click the value in the <b>Property</b> column to select the property to bind to a source property.</li>
<li>Double-click the value in the <b>Source Item</b> column to select the object whose property you want to use to determine the behavior of the target object.</li>
<li>Double-click the value in the <b>Source Property</b> column to select the property to bind the target property to.</li>
</ol>
</div>
<!-- @@@quick-property-bindings.html -->
<p class="naviNextPrevious footerNavi">
<a class="prevPage" href="quick-dynamic-properties.html">Specifying Dynamic Properties</a>
<span class="naviSeparator">  &#9702;  </span>
<a class="nextPage" href="quick-connections-backend.html">Managing C++ Backend Objects</a>
</p>
        </div>
       </div>
   </div>
   </div>
</div>
<div class="footer">
   <p>
   <acronym title="Copyright">&copy;</acronym> 2019 The Qt Company Ltd.
   Documentation contributions included herein are the copyrights of
   their respective owners.<br>    The documentation provided herein is licensed under the terms of the    <a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation    License version 1.3</a> as published by the Free Software Foundation.<br>    Qt and respective logos are trademarks of The Qt Company Ltd.     in Finland and/or other countries worldwide. All other trademarks are property
   of their respective owners. </p>
</div>
</body>
</html>
